<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生选课</title>
    <link rel="stylesheet" href="css/home.css">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="app">
    <el-container>
        <el-header>
            <el-row>
                <el-col :span="18"><div class="grid-content bg-purple">
                         --- 学 生 自 主 选 课
                </div></el-col>
                <el-col :span="6"><div class="grid-content bg-purple-light">
                    <el-button type="primary" @click="selectActionPage"> 选 课 情 况 预 览 </el-button>

                    <el-button type="success" @click="quit"> 退 出 登 录</el-button >
                </div></el-col>
            </el-row>
        </el-header>
        <el-container>
            <el-aside width="100px">

            </el-aside>
            <el-main >
                <template>
                <el-table
                        :data="chooseCourses"
                        style="width: 100%"
                        max-height="500">
                    <el-table-column
                            prop="course_id"
                            label="课程编号"
                            width="150">
                    </el-table-column>
                    <el-table-column
                            prop="course_name"
                            label="课程名称"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="teacher"
                            label="授课老师"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="point"
                            label="学分"
                            width="80">
                    </el-table-column>
                    <el-table-column
                            prop="class_time"
                            label="上课时间"
                            width="310">
                    </el-table-column>
                    <el-table-column
                            prop="location"
                            label="上课地点"
                            width="150">
                    </el-table-column>
                    <el-table-column
                            prop="operate"
                            fixed="right"
                            label="操作"
                            width="120">
                        <template slot-scope="scope">
                            <el-button-group>
                                <el-button v-if="scope.row.operate==='选课'"  type="warning"  width="50" @click="select_class(scope.row.course_id)">选 课</el-button>
                                <el-button v-else-if="scope.row.operate==='退课'"  type="primary"  width="50" @click="quit_class(scope.row.course_id)">退 课</el-button>
                                <el-button v-else type="warning" disabled>选 课</el-button>
                            </el-button-group>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="limited"
                            label="限制人数"
                            width="80">
                    </el-table-column>
                    <el-table-column
                            prop="select_number"
                            label="已选人数"
                            width="80">
                    </el-table-column>
                </el-table>
            </template>
            </el-main>
        </el-container>
    </el-container>

</div>
<script src="js/axios-0.18.0.js"></script>
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script>

    // ---------------------用户--------------------
    user={
        userName:"",
        passWord:"",
        realName:"",
        role:"",
    }
    // 课程---------------------
    course={
        id:"",
        name:"",
        teacher:"",
        point:"",
        time1:"",
        time2:"",
        location:"",
        limited:"",
    }
    // 选课-----------
    elective={
        userName:"",
        courseId:"",
    }
    // 选课
    userCourse={
    userName : "",
    passWord : "",
    realName : "",
    role : "",
    courseId : "",
    courseName : "",
    teacher : "",
     point : "",
    time1 : "",
    time2 : "",
    location : "",
     limited : "",
    }
    // 获取当前用户
    var url=window.location.search; //获取url中"?"符后的字串
    url = decodeURI(url);
    //接收一个值
    function oneValues(){
        var value;
        var url=window.location.search; //获取url中"?"符后的字串
        if(url.indexOf("?")!=-1){
            value = url.substr(url.indexOf("=")+1);
        }
        return decodeURI(value);
    }
    var result = oneValues();
    user.userName=result;

    new Vue({
        el:"#app",
        mounted() {
            //当页面加载完成后，发送异步请求，获取数据
            var _this = this;
            var timer = setInterval(function(){
                axios({
                    method: "post",
                    // url: "http://localhost:8080/%E5%AD%A6%E7%94%9F%E9%80%89%E8%AF%BE%E7%B3%BB%E7%BB%9F/chooseCourseServlet",
                    url: "http://1f4c5f22.r6.cpolar.top/%E5%AD%A6%E7%94%9F%E9%80%89%E8%AF%BE%E7%B3%BB%E7%BB%9F/chooseCourseServlet",
                    data: user
                }).then(function (resp) {
                    _this.chooseCourses = resp.data;
                })
            }, 100);
            timer
        },
        methods: {
            selectActionPage(){
                // 跳转到自己已选的课网页
                window.location.href="sclass.html?valus=" + user.userName;
            },
            quit(){
                // 退出到登录页面
                user.userName = '';
                window.location.href="login.html";

            },
            select_class(course_id){
                userCourse.userName = user.userName;
                userCourse.courseId = course_id;
                axios({
                    method:"post",
                    // url:"http://localhost:8080/%E5%AD%A6%E7%94%9F%E9%80%89%E8%AF%BE%E7%B3%BB%E7%BB%9F/select_class_Servlet",
                    url: "http://1f4c5f22.r6.cpolar.top/%E5%AD%A6%E7%94%9F%E9%80%89%E8%AF%BE%E7%B3%BB%E7%BB%9F/select_class_Servlet",
                    data:userCourse
                }).then(function (resp) {
                    if(resp.data == "yes"){
                        // 刷新页面
                    }else if(resp.data == "no"){
                        alert("选课失败")
                    }
                })
            },
            quit_class(course_id){
                userCourse.userName = user.userName;
                userCourse.courseId = course_id;
                axios({
                    method:"post",
                    // url:"http://localhost:8080/%E5%AD%A6%E7%94%9F%E9%80%89%E8%AF%BE%E7%B3%BB%E7%BB%9F/quit_class_Servlet",
                    url: "http://1f4c5f22.r6.cpolar.top/%E5%AD%A6%E7%94%9F%E9%80%89%E8%AF%BE%E7%B3%BB%E7%BB%9F/quit_class_Servlet",
                    data:userCourse
                }).then(function (resp) {
                    if(resp.data == "yes"){
                        // 刷新页面
                    }else if(resp.data == "no"){
                        alert("删除失败")
                    }
                })
            }
        },
        data() {
            return {
                chooseCourses:[],
            }
        }
    })
</script>

</body>
</html>